<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="css/clover.css">
     <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
	  <script src="js/jquery-3.1.1.min.js"></script>
	  <script src="js/md5.min.js"></script>
    <title>clover</title>
</head>
<body>
    <script>
        //核心业务逻辑
        ///$(function () {} 当DOM加载完毕后执行
        $(function(){
           //当点击这个按钮后就会执行function函数
           $("#submit").click(function(){
               //获取到用户名和密码
               var username = $("#user").val();
               var password = $("#password").val();
               //判断用户名密码是否为空!
               if(username.trim()==""||password.trim()==""){
                   alert("请输入用户名和密码");
                   return;
               }
               //这里就需要将请求前端数据返回给服务器!
               $.ajax({
                   url:"/user/login",//指定路径
                   type:"post",
                   data:{"username":username,"password":password},
                   dataType:"json", //设置服务器返回json数据
                   success:function(body){//回调函数
                       console.log(body);
                       if(body.status==0){//通过后端发送回来的status判断登入状态!
                           alert("登入成功!");
                           //登入成功后跳转到指定页面
                           window.location.href = "list.html";
                       }else{
                           alert("登入失败,账号或密码错误,请重试!");
                           //将输入框清空!
                           $("#message").text("进行登入前,请确认用户名和密码无误!");
                           $("#user").val("");
                           $("#password").val("");
                       }
                   }
               });
           });
        });
     </script>
       <script>
        //注册核心业务逻辑
        ///$(function () {} 当DOM加载完毕后执行
        $(function(){
           //当点击这个按钮后就会执行function函数
           $("#submit1").click(function(){
               //获取到用户名和密码
               var username1 = $("#user1").val();
               var password1 = $("#password1").val();
               var password2 = $("#password2").val();
               //判断用户名密码是否为空!
               if(username1.trim()==""||password1.trim()==""||password2.trim()==""){
                   alert("请输入用户名和2次密码");
                   return;
               }
               if(password1!=password2){
                   //2次密码不同
                   alert("输入的2次密码不同,请重新输入");
                   return;
               }
               //这里就需要将请求前端数据返回给服务器!
               $.ajax({
                   url:"/user/register",//指定路径
                   type:"post",
                   data:{"username":username1,"password":password1},
                   dataType:"json", //设置服务器返回json数据
                   success:function(body){//回调函数
                       console.log(body);
                       if(body.status==0){//通过后端发送回来的status判断登入状态!
                           alert("注册成功!");
                           //登入成功后跳转到指定页面
                           $("#user1").val("");
                           $("#password1").val("");
                           $("#password2").val("");
                       }else{
                           alert("注册失败,用户已被注册!");
                           $("#user1").val("");
                           $("#password1").val("");
                           $("#password2").val("");
                       }
                   }
               });
           });
        });
     </script>
    <!-- 四叶草 -->
    <div class="box">
        <!-- 四叶草的单片叶子 -->
        <div class="clover"></div>
        <div class="clover"></div>
        <div class="clover"></div>
        <div class="clover"></div>
    </div>
    <!-- 表单盒子 -->
    <div class="form-box">
        <!-- 登录盒子 -->
        <div class="login-box">
            <!-- 标题 -->
            <h1 class="title">
                Sign in
            </h1>
            <!-- 图片盒子 -->
            <div class="img-box">
                <!-- 图片 -->
                <img src="images/胡桃.jpg" alt="">
            </div>
            <!-- 输入框盒子 -->
            <div class="input-box">
                <!-- 输入框 -->
                <input type="text" id="user" placeholder="用户名">
                <input type="password" id="password" placeholder="密码">
            </div>
            <!-- 按钮盒子 -->
            <div class="btn-box">
                <button id="submit">登录</button>
                <!-- 绑定点击事件 -->
                <button onclick="mySlide()">注册</button>
            </div>
        </div>
        <!-- 注册盒子 -->
        <div class="register-box">
            <!-- 标题 -->
            <h1 class="title">
                Sign up
            </h1>
            <!-- 图片盒子 -->
            <div class="img-box">
                <!-- 图片 -->
                <img src="images/可莉.png" alt="">
            </div>
            <!-- 输入框盒子 -->
            <div class="input-box">
                <!-- 输入框 -->
                <input type="text" id="user1" placeholder="用户名">
                <input type="password" id="password1" placeholder="密码">
                <input type="password" id="password2" placeholder="确认密码">
            </div>
            <!-- 按钮盒子 -->
            <div class="btn-box">
                <button id="submit1">注册</button>
                <!-- 绑定点击事件 -->
                <button onclick="mySlide()">登录</button>
            </div>
        </div>
    </div>
    <script>
        // 控制切换状态
        let flag=true
        // 切换函数
        const mySlide = ()=>{
            // 获取注册盒子和登录盒子的dom元素
            const register_box=document.querySelector('.register-box')
            const login_box=document.querySelector('.login-box')

            if(flag){
                // 注册盒子显示
                register_box.style.display="block"
                // 登录盒子隐藏
                login_box.style.display="none"
            }else {
                //注册盒子隐藏
                register_box.style.display="none"
                // 登录盒子显示
                login_box.style.display="block"
            }
            // 每次点击都改变状态
            flag=!flag
        }
    </script>
</body>
</html>